<!DOCTYPE html>
<html>
<head>
    <title>bPage使用文档</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
    <link rel="stylesheet" href="../css/bpage/header.css" />
    <link rel="stylesheet" href="../css/bpage/docs.css" />
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.github.io/bpage/index.html" class="navbar-brand">bPage</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="guide.html" >入门</a>
                </li>
                <li>
                    <a href="demo.html" >实例</a>
                </li>
                <li class="active">
                    <a href="javascript:void(0);" >文档</a>
                </li>
                <li>
                    <a href="changelog.html" >更新记录</a>
                </li>
                <li>
                    <a href="message.html" >留言/反馈</a>
                </li>
                <li>
                    <a href="https://terryz.github.io" >主页</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/bPage" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>


    <div class="content">
        <div class="container">
			<div class="row">
				<div class="col-md-3">
					<div class="navBox">
					<ul class="nav" id="nav">
						<li class="current"><a href="#url">url</a></li>
						<li><a href="#pageSize">pageSize</a></li>
						<li><a href="#pageNumber">pageNumber</a></li>
						<li><a href="#totalRow">totalRow</a></li>
						<li><a href="#totalPage">totalPage</a></li>
						<li><a href="#callback">callback</a></li>
						<li><a href="#params">params</a></li>
						<li><a href="#pageBarSize">pageBarSize</a></li>
						<li><a href="#pageSizeMenu">pageSizeMenu</a></li>
						<li><a href="#asyncLoad">asyncLoad</a></li>
						<li><a href="#asyncTarget">asyncTarget</a></li>
						<li><a href="#serverSidePage">serverSidePage</a></li>
						<li><a href="#className">className</a></li>
						<li><a href="#render">render</a></li>
						<li><a href="#bPageSwitch">$.fn.bPageSwitch</a></li>
						<li><a href="#bPageRefresh">$.fn.bPageRefresh</a></li>
					</ul>
					</div>
				</div>
				<div class="col-md-9 propertiesBox">
					<div class="row" id="url">
						<h3>url <small>分页跳转URL</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>无默认值，该参数为必填参数</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
									<p><code>http://xxx.com/load</code></p>
									<p>在页面跳转模式下，url设置为目标跳转位置，插件会自动拼接分页参数及用户自定义参数；在异步模式下作为数据请求的目标位置，插件同样会自动拼接上参数</p>
									<p>例如：<code>http://xxx.com/load?aa=1&bb=2</code></p>
									<p></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="pageSize">
						<h3>pageSize <small>每页显示记录数</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>10</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								根据使用需要设置每页显示记录数，默认值为10
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="pageNumber">
						<h3>pageNumber <small>当前页号</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>1</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置当前页号，默认值为1
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="totalRow">
						<h3>totalRow <small>总记录个数</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>0</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置数据的总记录个数，该参数仅在页面跳转模式下<code>asyncLoas:false</code>才需要显式设置
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="totalPage">
						<h3>totalPage <small>总页数</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>1</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置分页总页数，该参数仅在页面跳转模式下<code>asyncLoas:false</code>才需要显式设置
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="callback">
						<h3>callback <small>分页操作处理完成后的回调函数（异步）</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>该回调仅在异步模式中使用，在每次分页操作完成后执行</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="params">
						<h3>params <small>传递参数</small></h3>
						<ul>
							<li><strong>类型：</strong><code>object</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>进行页面跳转或数据请求时需要传递给服务端的参数集</p>
								<p>格式：<code>{'name':'aa','sex':1}</code></p>
								<p>例如：<code>params : {'name':'aa','sex':1}</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="pageBarSize">
						<h3>pageBarSize <small>显示页码个数，建议使用奇数</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>5</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>该参数用于设置分页插件显示的分页页码个数，意义在于页码数较多时，可指定分页栏中显示页码的个数</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="pageSizeMenu">
						<h3>pageSizeMenu <small>每页显示记录数设置</small></h3>
						<ul>
							<li><strong>类型：</strong><code>array</code></li>
							<li><strong>默认值：</strong><code>[10,20,50,100]</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置快速改变每页显示记录数的选项，结果以下拉列表显示，用户通过选择下拉列表项可立即改变每页显示的记录数
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="asyncLoad">
						<h3>asyncLoad <small>异步处理分页</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>false</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
									<p>设置分页插件的分页模式</p>
									<ul>
										<li>页面跳转模式(false)</li>
										<li>异步请求页面模式（服务端页面）(true)</li>
										<li>异步请求数据模式（服务端JSON数据）(true)</li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="asyncTarget">
						<h3>asyncTarget <small>异步处理对象容器，支持使用jquery表达式</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string | object</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>该参数在异步模式且<code>serverSidePage:true</code>时使用，参数指定了服务端返回的页面内容放置的目标区域</p>
								<p>参数设置接受jquery表达式，也允许直接传递jQuery对象</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="serverSidePage">
						<h3>serverSidePage <small>是否使用服务端返回页面的形式</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>false</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>插件的异步模式分为服务端返回页面模式(true)，及服务端返回数据(json)模式(false)</p>
								<p><span class="label label-primary">注意</span> 服务端返回页面模式下，需要在返回的页面内容中增加分页数据元素，用于读取分页数据，若不设置该内容，插件则没有办法读取到分页信息，则在异步服务端页面模式下必须设置，格式如下：</p>
								<textarea style="width: 100%;height: 150px;">
<div class="paginationInfoBox">
	<input type="hidden" id="bPagePageNumber" value="$ {userList.pageNumber}">
	<input type="hidden" id="bPagePageSize" value="$ {userList.pageSize}">
	<input type="hidden" id="bPageTotalPage" value="$ {userList.totalPage}">
	<input type="hidden" id="bPageTotalRow" value="$ {userList.totalRow}">
</div>
								</textarea>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="className">
						<h3>className <small>为分页插件自定义样式</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>页面中需要设置不同的风格样式时，可以使用该参数指定需要使用的样式名称</p>
								<p><span class="label label-default">提示</span> 样式内容需要预先定义，插件本身仅为默认的样式</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="render">
						<h3>render <small>异步数据模式自定义处理回调</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>ajax请求服务端并返回json数据后，可使用数据进行自定义页面渲染</p>
								<p><span class="label label-default">提示</span> 该回调仅在<code>serverSidePage:false</code>时使用</p>
								<p>例：<code>render : function(data){ $('#aa').val(data.name); }</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="bPageSwitch">
						<h3>$.fn.bPageSwitch <small>切换当前页</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>该API函数提供在代码中手动切换插件当前分页的功能</p>
								<p>例：<code>$('#page').bPageSwitch(2);</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="bPageRefresh">
						<h3>$.fn.bPageRefresh <small>刷新新页栏</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>该API方法可刷新插件的内部参数，并立即响应修改</p>
								<p>例：<br><code>$('#page').bPageRefresh({pageSize:20,pageBarSize:7});</code></p>
								</div>
							</li>
						</ul>
					</div>
					
					
					
					
				</div>
			</div>
        </div>
    </div>






<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/nav/jquery.nav.js" ></script>
<script type="text/javascript" src="../lib/stickUp/stickUp.min.js" ></script>
<script type="text/javascript" src="../js/docs.js" ></script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>